import {init } from 'snabbdom/build/package/init'
import {h} from 'snabbdom/build/package/h'
import { styleModule } from 'snabbdom/build/package/modules/style'
import { classModule } from 'snabbdom/build/package/modules/class'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

let vnode

const patch = init([
    styleModule,
    classModule,
    eventListenersModule
])

//第一个参数：标签+选择器
//第二个参数：如果是字符串就是标签中的文本内容
let flag = false
function view (data){
    return  h('div#container.cls',{
        style:{background:'lightblue'}
    },[
        data,
        h('button',{
            style:{ color:'red' },
            on:{
                click:()=>{
                    if(flag === false){
                        flag = true
                        vnode = patch(vnode,view('data')) // 对比vnode差异并重新生产DOM元素
                    }else{
                        flag = false
                        vnode = patch(vnode,view('Hello World'))// 对比vnode差异并重新生产DOM元素
                    }
                }
            },
            class:{ active: flag === true?true:false },
        
        },'click')
    ])
}


//获取页面上的div
let app = document.querySelector('#app')

//第一个参数：旧的vnode ；还可以是dom元素（可以将真实dom元素转换成vnode）
//第二个参数：新的vnode 
//patch函数将新的vnode与旧的vnode对比，如果有差异，则更新成新的vnode(也可以将真实dom转换成vnode,对比更新vnode)
//返回新的vnode 保存状态，作为下次对比更新时的老的vnode使用
vnode = patch(app,view('Hello World'))

